<template>
  <div v-loading="pageLoading" class="modal_style">
    <div v-for="(item, index) in pageList" :key="index">
      <div class="title">{{ item.trainning.name }}</div>
      <div class="subtitle">报名开始时间：{{ item.trainning.entryStartTime ? item.trainning.entryStartTime.slice(0, 10) : '--' }}</div>
      <div class="gl_mb_10">
        <el-row>
          <el-col v-if="item.approveStatus.code === 'ApproveFailed'" :span="12">
            <template>
              <el-button v-show="trainRoute" type="primary" size="small" @click="jumpToTrainEntry">去修改</el-button>
              <el-button type="primary" size="small" @click="showRemark(item)">查看驳回原因</el-button>
            </template>
          </el-col>
          <el-col :span="item.approveStatus.code === 'ApproveFailed' ? 12 : 24" align="right">
            <div class="approve_style">
              <span>审核状态：</span>
              <span>{{ item.approveStatus.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-tabs v-model="activeName" type="card" style="margin-bottom: 60px">
        <el-tab-pane label="培训项目" name="Train">
          <!-- table -->
          <el-table size="mini" class="notice_table gl_table_noBorder" :data="Train">
            <el-table-column type="index" label="序号" width="120" />
            <el-table-column label="培训科目名称" prop="name" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="考试项目" name="Exam">
          <!-- table -->
          <el-table size="mini" class="notice_table gl_table_noBorder" :data="Exam">
            <el-table-column type="index" label="序号" width="120" />
            <el-table-column label="考试科目名称" prop="name" />
          </el-table>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>

<script>
import {
  api_GET_TrainTrainningEntryApprovalTrainningEntryApprovals
} from '@/extend/api/trainswaggerApi/app.js';

import {
  Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO
} from '@/lib/form/train/swaggerForm';

export default {
  data () {
    return {
      pageLoading: false,
      qo: new Api_GET_TrainTrainningEntryApprovalTrainningEntryApprovalsQO(),
      activeName: 'Train',
      registerId: '',
      trainningId: '',
      pageList: [],
      Train: [],
      Exam: [],
      trainRoute: '',
      tenantId: ''
    };
  },
  created() {
    const { query } = this.$route;
    this.registerId = query.registerId;
    this.trainningId = query.trainningId;
    this.getPageList();
  },
  methods: {
    // 获取报项中心列表
    getPageList(page) {
      this.pageLoading = true;
      this.qo.RegisterId = this.registerId;
      this.qo.TrainningId = this.trainningId;

      this.qo.IncludeSourceRegister = true;
      this.qo.IncludeTrainningRegister = true;
      this.qo.IncludeSubjects = true;
      this.qo.IncludeOrderDetail = true;
      this.qo.IncludeNotApproved = true; // must
      this.qo.IncludeTrainning = true; // must

      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      var that = this;
      api_GET_TrainTrainningEntryApprovalTrainningEntryApprovals(this.qo)
        .then(
          res => {
            that.pageLoading = false;
            if (res.items && res.items.length) {
              that.pageList = [res.items[0]];
              that.Train = that.handleList(that.pageList, 'Train');
              that.Exam = that.handleList(that.pageList, 'Exam');
              that.trainRoute = res.items[0].trainning.route;
              that.tenantId = res.items[0].trainning.tenantId;
            }
          }
        )
        .catch(
          error => {
            that.$message({
              message: `获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
            that.pageLoading = false;
          }
        );
    },
    handleList(data, code) {
      const list = data[0].subjects;
      const array = [];
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        if (item.subjectTypeCode === code) {
          array.push(item);
        }
      }
      return array;
    },
    showRemark (item) {
      const _remark = item.approveRemark || '-';
      this.$alert(_remark, {
        title: '驳回原因'
      });
    },
    jumpToTrainEntry () {
      const a = document.createElement('a');
      const event = new MouseEvent('click');
      a.href = `${location.origin}/train.html#/home/${this.trainRoute + (this.tenantId ? '_' + this.tenantId : '')}/info/enter?id=${this.trainningId}`;
      a.target = '_blank';
      a.dispatchEvent(event);
    }
  }
};
</script>

<style lang="scss" scoped>
.modal_style {
  position: relative;
  padding: 10px 15px 0px 0px;
  min-height: 300px;
}
.approve_style {
  line-height: 32px;
  font-size: 14px;
  color: #353434;
}
.title {
  font-size: 20px;
  font-weight: 400;
  color: #353434;
  line-height: 22px;
  margin-bottom: 24px;
  text-align: center;
}
.subtitle {
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: #353434;
  line-height: 22px;
  margin-bottom: 40px;
}
</style>
